æ¬ã¬ã€ãã§JavaScriptã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ãç¿åŸããŸããããESã¢ãžã¥ãŒã«ãCommonJSãã·ã³ã°ã«ãã³ããã¡ãµãŒãçã®ãã¶ã€ã³ãã¿ãŒã³ãã¹ã±ãŒã©ãã«ãªã³ãŒãã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
JavaScriptã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ïŒãã¶ã€ã³ãã¿ãŒã³ãšãã¹ããã©ã¯ãã£ã¹ãžã®ã°ããŒãã«ã¬ã€ã
ãœãããŠã§ã¢éçºã®äžçã§ã¯ãã¹ã±ãŒã©ãã«ã§ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšãæ®éçãªç®æšã§ãããããžã§ã¯ããè€éåããããŒã ãã°ããŒãã«ã«åæ£ããã«ã€ããŠãå ç¢ãªã³ãŒãæ§é ã®å¿ èŠæ§ãæãéèŠã«ãªããŸããJavaScriptãšã³ã·ã¹ãã ã«ããããã®æ§é ã®äžå¿ã«ã¯ãã¢ãžã¥ãŒã«ã®æŠå¿µããããŸããæç¢ºã«å®çŸ©ãããã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã¯ãåãªãæè¡çãªè©³çްã§ã¯ãããŸãããããã¯ãã³ã©ãã¬ãŒã·ã§ã³ãã¹ã±ãŒã©ããªãã£ããããŠé·æçãªãããžã§ã¯ãã®å¥å šæ§ã®ããã®èšèšå³ãªã®ã§ãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãJavaScriptã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã®äžçãæ¡å ããŸããæ··æ²ãšããã°ããŒãã«ã¹ã³ãŒãããæšæºåãããåªé ãªESã¢ãžã¥ãŒã«ãžã®é²åãæ¢æ±ããŸããäžè¬çãªåé¡ã«å¯ŸããŠå®çžŸã®ãã解決çãæäŸãã匷åãªãã¶ã€ã³ãã¿ãŒã³ãæ·±ãæãäžããäžçäžã®ã©ã®ããŒã ã§ãããè¯ããœãããŠã§ã¢ãæ§ç¯ããããã«æ¡çšã§ããäžé£ã®ãã¹ããã©ã¯ãã£ã¹ã確ç«ããŸããReactãVueã®ãããªãã¬ãŒã ã¯ãŒã¯ã䜿çšããããã³ããšã³ãéçºè ãNode.jsç°å¢ã®ããã¯ãšã³ãéçºè ããããã¯ãã«ã¹ã¿ãã¯ãšã³ãžãã¢ã§ãã£ãŠãããããã®æŠå¿µãç¿åŸããããšã¯å°éçãªæé·ã«äžå¯æ¬ ã§ãã
ã¢ãã³ã¢ãžã¥ãŒã«ãžã®éã®ãïŒç°¡åãªæŽå²
çŸä»£ã®JavaScriptã¢ãžã¥ãŒã«ã®åãçè§£ããããã«ã¯ããããã解決ããåé¡ãçè§£ããªããã°ãªããŸãããJavaScriptã®åæã®é ã«ã¯ãã¢ãžã¥ãŒã«ã®æŠå¿µã¯ãããŸããã§ãããããŒãžã«èªã¿èŸŒãŸãããã¹ãŠã®ã¹ã¯ãªããã¯ããã©ãŠã¶ã®`window`ãªããžã§ã¯ããšããåäžã®ã°ããŒãã«ã¹ã³ãŒããå ±æããŠããŸãããããã¯å€ãã®åé¡ãåŒãèµ·ãããŸããïŒ
- ã°ããŒãã«åå空éã®æ±æïŒ ã¹ã¯ãªãããäºãã®å€æ°ã颿°ãäžæžãããŠããŸãã远跡ãå°é£ãªäºæž¬äžèœãªãã°ã«ã€ãªããå¯èœæ§ããããŸãããããã¹ã¯ãªããã§å®çŸ©ããã`user`倿°ããå¥ã®ã¹ã¯ãªããã«ãã£ãŠæå³ãã眮ãæããããããšããããŸããã
- æç€ºçãªäŸåé¢ä¿ã®æ¬ åŠïŒ ã³ãŒããèŠãã ãã§ã¯ãã©ã®ã¹ã¯ãªãããä»ã®ã¹ã¯ãªããã«äŸåããŠãããã倿ããããšã¯äžå¯èœã§ãããHTMLãã¡ã€ã«å ã®`<script>`ã¿ã°ã®é åºããäŸåé¢ä¿ã管çããããã®èåŒ±ã§æé»çãªæ¹æ³ãšãªã£ãŠããŸããã
- äžååãªã«ãã»ã«åïŒ ãã©ã€ããŒããªå€æ°ã颿°ãäœæããç°¡åãªæ¹æ³ããããŸããã§ããããã¹ãŠãå ¬éãããŠãããèªå·±å®çµåã§åå©çšå¯èœãªã³ãŒããäœæããããšãå°é£ã§ããã
æåã®è§£æ±ºçïŒã¢ãžã¥ãŒã«ãã¿ãŒã³ïŒIIFEïŒ
å ¬åŒãªã¢ãžã¥ãŒã«ã·ã¹ãã ãååšããåãã³ãã¥ããã£ã¯ã¯ããŒãžã£ãšå³æå®è¡é¢æ°åŒïŒIIFEïŒã䜿çšããè³¢ã解決çãèæ¡ããŸãããããã¯ã¢ãžã¥ãŒã«ãã¿ãŒã³ãšããŠç¥ãããããã«ãªããŸããã
IIFEã¯ãå®çŸ©ããããšããã«å®è¡ããã颿°ã§ããã³ãŒããIIFEã§ã©ããããããšã«ãããéçºè ã¯ãã©ã€ããŒãã¹ã³ãŒããäœæã§ããŸãããIIFEå ã§å®çŸ©ããã倿°ã颿°ã¯ã°ããŒãã«ã¹ã³ãŒãããã¢ã¯ã»ã¹ã§ãããæ±æãé²ããŸããããªããžã§ã¯ããè¿ãããšã§ããããªãã¯ãªã€ã³ã¿ãŒãã§ãŒã¹ãå ¬éããããšãã§ããŸããã
å€å žçãªã¢ãžã¥ãŒã«ãã¿ãŒã³ã®äŸïŒ
const counterModule = (function() {
let privateCounter = 0; // This is private
function privateChangeBy(val) {
privateCounter += val;
}
// Return an object that exposes a public API
return {
increment: function() {
privateChangeBy(1);
},
decrement: function() {
privateChangeBy(-1);
},
value: function() {
return privateCounter;
}
};
})();
console.log(counterModule.value()); // 0
counterModule.increment();
console.log(counterModule.value()); // 1
console.log(counterModule.privateCounter); // undefined - it's private!
å€§å¹ ãªæ¹åã§ã¯ãããŸããããIIFEãã¿ãŒã³ã¯äŸç¶ãšããŠåäžã®ã°ããŒãã«å€æ°ïŒäŸïŒ`counterModule`ïŒã«äŸåããŠãããã¢ãžã¥ãŒã«éã®äŸåé¢ä¿ãæšæºåãããæ¹æ³ã§ç®¡çããåé¡ã解決ããŸããã§ããã
æšæºåãããã¢ãžã¥ãŒã«ã·ã¹ãã ã®å°é
JavaScriptã¢ããªã±ãŒã·ã§ã³ãç¹ã«Node.jsã䜿çšãããµãŒããŒãµã€ãã®ã¢ããªã±ãŒã·ã§ã³ãããè€éã«ãªãã«ã€ããŠãæ£åŒãªã¢ãžã¥ãŒã«ã·ã¹ãã ã®å¿ èŠæ§ã¯åŠå®ã§ããªããªããŸãããããã«ãããããã€ãã®ç«¶åããæšæºãçãŸããŸããã
CommonJS (CJS)
Node.jsã«ãã£ãŠéæãããCommonJSã¯ãåæçãªã¢ãžã¥ãŒã«ã·ã¹ãã ãå°å ¥ããŸãããã¢ãžã¥ãŒã«ãã€ã³ããŒãããããã«`require`颿°ã䜿çšãããããªãã¯APIãå ¬éããããã«`module.exports`ãŸãã¯`exports`ã䜿çšããŸãããã®åæçãªæ§è³ªã¯ããã¡ã€ã«ããã£ã¹ã¯ããèªã¿èŸŒãŸããé å»¶ãå°ãªããµãŒããŒã«æé©ã§ããã
- `require`: ã¢ãžã¥ãŒã«ãããŒãããããã®é¢æ°ãåæçã§ãããã¢ãžã¥ãŒã«ãããŒãããããŸã§å®è¡ããããã¯ããŸãã
- `module.exports`: ã¢ãžã¥ãŒã«ãå ¬éãããã¹ãŠãå«ããªããžã§ã¯ãã
CommonJSã¢ãžã¥ãŒã«ã®äŸïŒ`math.js`ïŒïŒ
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
äœ¿çšæ³ïŒ`app.js`ïŒïŒ
// app.js
const math = require('./math.js');
console.log(math.add(5, 3)); // 8
ããããCommonJSã®åæçãªã¢ãããŒãã¯ããããã¯ãŒã¯çµç±ã§ã¹ã¯ãªãããèªã¿èŸŒãããšãæéããããéåææäœã§ãããã©ãŠã¶ã«ã¯é©ããŠããŸããã§ãããã¹ã¯ãªãããããŠã³ããŒããããã®ãåŸ ã€éãã©ãŠã¶ã®ã¡ã€ã³ã¹ã¬ããããããã¯ããããšã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®äœäžã«ã€ãªãããŸãã
éåæã¢ãžã¥ãŒã«å®çŸ©ïŒAMDïŒ
AMDã¯ç¹ã«ãã©ãŠã¶åãã«äœæãããŸããããã®åã®éããã¢ãžã¥ãŒã«ãéåæã«èªã¿èŸŒã¿ãŸããAMDã®æã人æ°ã®ããå®è£ ã¯RequireJSã§ãããããã¯ãäŸåé¢ä¿ã®ãªã¹ããšã³ãŒã«ããã¯é¢æ°ãåãåã`define`颿°ã䜿çšãããã®ã³ãŒã«ããã¯ã¯ãã¹ãŠã®äŸåé¢ä¿ãèªã¿èŸŒãŸããåŸã«ã®ã¿å®è¡ãããŸãã
AMDã¢ãžã¥ãŒã«ã®äŸïŒ
// app.js
define(['./math', './utils'], function(math, utils) {
// This code runs only after math.js and utils.js are loaded
console.log(math.add(10, 20));
utils.log('Module loaded!');
});
ESã¢ãžã¥ãŒã«ïŒESMïŒïŒçŸä»£ã®æšæº
ã€ãã«ãECMAScript 2015ïŒES6ïŒã§ãJavaScriptã¯ç¬èªã®ãã€ãã£ãã§æšæºåãããã¢ãžã¥ãŒã«ã·ã¹ãã ãESã¢ãžã¥ãŒã«ïŒESMïŒãæã«å ¥ããŸãããESMã¯ãCommonJSã®ã·ã³ãã«ãªæ§æãšãã©ãŠã¶ã«å¿ èŠãªéåææ§ãå ŒãåããŠããŸãã仿¥ã§ã¯ããã¹ãŠã®ã¢ãã³ãã©ãŠã¶ãšNode.jsã§ãµããŒããããŠããæ®éçãªæšæºã§ãã
ESã¢ãžã¥ãŒã«ã®äž»ãªç¹åŸŽïŒ
- éçæ§é ïŒ `import`ããã³`export`æã¯éçã§ããæ¡ä»¶ãããã¯å ã§ã€ã³ããŒããŸãã¯ãšã¯ã¹ããŒããããã®ãåçã«å€æŽããããšã¯ã§ããŸãããããã«ããããã«ãããŒã«ããšã³ãžã³ã¯ãæªäœ¿çšã®ã³ãŒããæçµçãªãã³ãã«ããåé€ãããããªãŒã·ã§ã€ãã³ã°ã®ãããªåŒ·åãªæé©åãå®è¡ã§ããŸãã
- éåæïŒãã³ããããã³ã°ïŒ ã¢ãžã¥ãŒã«ã¯éåæã«èªã¿èŸŒãŸããããããŠã§ãã«æé©ã§ãã
- ã¬ãã·ã«ã«ãª`this`ïŒ ã¢ãžã¥ãŒã«ã®ãããã¬ãã«ã«ããã`this`ããŒã¯ãŒãã¯`undefined`ã§ãããã°ããŒãã«ãªããžã§ã¯ãã®å¶çºçãªæ±æãé²ããŸãã
ESMã®æ§æ
1. ååä»ããšã¯ã¹ããŒãïŒ ã¢ãžã¥ãŒã«ããè€æ°ã®å€ããšã¯ã¹ããŒãããŸãã
// utils.js
export const PI = 3.14159;
export function double(n) {
return n * 2;
}
// main.js
import { PI, double } from './utils.js';
console.log(double(PI));
2. ããã©ã«ããšã¯ã¹ããŒãïŒ ã¢ãžã¥ãŒã«ããåäžã®äž»èŠãªå€ããšã¯ã¹ããŒãããŸããã¢ãžã¥ãŒã«ã¯ããã©ã«ããšã¯ã¹ããŒãã1ã€ããæãŠãŸããã
// Logger.js
export default class Logger {
constructor(name) {
this.name = name;
}
log(message) {
console.log(`[${this.name}] ${message}`);
}
}
// main.js
import MyLogger from './Logger.js'; // You can name it anything
const appLogger = new MyLogger('App');
appLogger.log('Application started.');
3. åçã€ã³ããŒãïŒ ããã©ãŒãã³ã¹æé©åã®ããã«ã`import()`颿°ã䜿çšããŠãªã³ããã³ãã§ã¢ãžã¥ãŒã«ãèªã¿èŸŒãããšãã§ããŸããããã¯Promiseãè¿ããŸãã
const loginButton = document.getElementById('loginBtn');
loginButton.addEventListener('click', async () => {
// Load the login module only when the button is clicked
const { showLoginForm } = await import('./login-modal.js');
showLoginForm();
});
ã³ã¢ã¢ãžã¥ãŒã«ãã¶ã€ã³ãã¿ãŒã³
ãã¶ã€ã³ãã¿ãŒã³ã¯ãç¹å®ã®ã³ã³ããã¹ãå ã§é »ç¹ã«çºçããåé¡ã«å¯Ÿããåå©çšå¯èœãªè§£æ±ºçã§ããããããã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã«é©çšããããšã§ãã³ãŒãã®å質ãåçã«åäžãããçµå床ãäžããåå©çšæ§ãé«ããããšãã§ããŸããçŸä»£ã®ESMæ§æã䜿çšããŠãæãé¢é£æ§ã®é«ããã¿ãŒã³ãããã€ãæ¢ã£ãŠã¿ãŸãããã
1. ã·ã³ã°ã«ãã³ãã¿ãŒã³
æå³ïŒ ã¯ã©ã¹ã1ã€ã®ã€ã³ã¹ã¿ã³ã¹ããæããªãããšãä¿èšŒããããã«ã¢ã¯ã»ã¹ããããã®ã°ããŒãã«ãªãã€ã³ããæäŸããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ èšå®ãããŒãžã£ãŒããã®ã³ã°ãµãŒãã¹ãããŒã¿ããŒã¹æ¥ç¶ããŒã«ãªã©ãå ±æãããç¶æ ããªãœãŒã¹ã管çããã®ã«æé©ã§ããç¶æ ã®äžæŽåããªãœãŒã¹ã®æµªè²»ã«ã€ãªããå¯èœæ§ã®ããè€æ°ã®ã€ã³ã¹ã¿ã³ã¹ã®äœæãé¿ãããå Žåã«äœ¿çšããŸãã
äŸïŒãµã€ãèšå®ãããŒãžã£ãŒ
// ConfigManager.js
class ConfigManager {
constructor() {
if (ConfigManager.instance) {
return ConfigManager.instance;
}
this.settings = { theme: 'dark', language: 'en' };
ConfigManager.instance = this;
}
get(key) {
return this.settings[key];
}
set(key, value) {
this.settings[key] = value;
}
}
// ESM leverages its module cache to simplify the Singleton pattern.
// When this module is imported elsewhere, the same instance is always returned.
const instance = new ConfigManager();
Object.freeze(instance); // Optional: makes the instance immutable
export default instance;
// --- Usage in another file ---
// componentA.js
import config from './ConfigManager.js';
console.log(config.get('theme')); // 'dark'
config.set('theme', 'light');
// componentB.js
import config from './ConfigManager.js';
console.log(config.get('theme')); // 'light' - it's the same instance!
2. ãã¡ãµãŒããã¿ãŒã³
æå³ïŒ è€éãªã¯ã©ã¹ãã©ã€ãã©ãªããŸãã¯APIã®ãµãã·ã¹ãã ã«å¯ŸããŠãç°¡çŽ åãããé«ã¬ãã«ã®ã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ ã¯ã©ã€ã¢ã³ãã³ãŒãããè€éããé ãããå Žåã«äœ¿çšããŸããäŸãã°ãAPIãªã¯ãšã¹ããåŠçããã¢ãžã¥ãŒã«ã¯ã`fetch`ã®è©³çްãããããŒã®èšå®ãç°ãªãHTTPã¡ãœããã®åŠçãJSONã®è§£æããšã©ãŒç®¡çãªã©ãæœè±¡åãããããããŸããããã®ã¢ãžã¥ãŒã«ã®å©çšè ã¯ã`api.get('/users')`ã®ãããªåçŽãªã¡ãœãããåŒã³åºãã ãã§æžã¿ãŸãã
äŸïŒAPIãµãŒãã¹ãã¡ãµãŒã
// apiService.js
const API_BASE_URL = 'https://api.example.com';
// Private helper function
async function _request(endpoint, options) {
const { method, body } = options;
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('authToken')}`
};
try {
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
method,
headers,
body: body ? JSON.stringify(body) : null
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
} catch (error) {
console.error('API Service Error:', error);
throw error; // Re-throw for the caller to handle
}
}
// Public Facade methods
export const get = (endpoint) => _request(endpoint, { method: 'GET' });
export const post = (endpoint, body) => _request(endpoint, { method: 'POST', body });
export const put = (endpoint, body) => _request(endpoint, { method: 'PUT', body });
export const del = (endpoint) => _request(endpoint, { method: 'DELETE' });
// --- Usage in another file ---
// userProfile.js
import { get, put } from './apiService.js';
async function fetchUserData(userId) {
const user = await get(`/users/${userId}`);
console.log(user);
}
async function updateUserName(userId, newName) {
await put(`/users/${userId}`, { name: newName });
}
3. ãªãã¶ãŒããŒãã¿ãŒã³ïŒãŸãã¯Publish/SubscribeïŒ
æå³ïŒ ãªããžã§ã¯ãéã«1察å€ã®äŸåé¢ä¿ãå®çŸ©ãã1ã€ã®ãªããžã§ã¯ãïŒãµããžã§ã¯ããŸãã¯ãããªãã·ã£ãŒïŒã®ç¶æ ãå€åãããšãã«ããã®ãã¹ãŠã®äŸåãªããžã§ã¯ãïŒãªãã¶ãŒããŒãŸãã¯ãµãã¹ã¯ã©ã€ããŒïŒãèªåçã«éç¥ãããæŽæ°ãããããã«ããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ ã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåãççµåã«ããŸããäŸãã°ãeã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ã§ããŠãŒã¶ãŒãã«ãŒãã«ååã远å ãããšããã«ãŒãã¢ãžã¥ãŒã«ã¯`item-added`ã€ãã³ããçºè¡ã§ããŸããããã«ãŒãUIã³ã³ããŒãã³ããã¡ã€ã³ã®ã«ãŒãããŒãžããã®ã³ã°ãµãŒãã¹ã¯ãã¹ãŠãã®ã€ãã³ãã賌èªããäºãã«ã€ããŠç¥ãããšãªãé©åã«åå¿ã§ããŸãã
äŸïŒã°ããŒãã«ã€ãã³ããããŒãžã£ãŒ
// EventManager.js
const events = {};
export const subscribe = (eventName, callback) => {
if (!events[eventName]) {
events[eventName] = [];
}
events[eventName].push(callback);
};
export const publish = (eventName, data) => {
if (events[eventName]) {
events[eventName].forEach(callback => callback(data));
}
};
export const unsubscribe = (eventName, callback) => {
if (events[eventName]) {
events[eventName] = events[eventName].filter(cb => cb !== callback);
}
};
// --- Usage in different parts of the application ---
// CartModule.js
import { publish } from './EventManager.js';
export function addItemToCart(item) {
// ... logic to add item
publish('cart:updated', { item, action: 'add' });
}
// MiniCartUI.js
import { subscribe } from './EventManager.js';
function updateMiniCart(data) {
console.log(`MiniCart UI: ${data.item.name} was added.`);
// ... update the UI
}
subscribe('cart:updated', updateMiniCart);
// AnalyticsService.js
import { subscribe } from './EventManager.js';
function logCartEvent(data) {
console.log(`Logging event: Cart updated with action '${data.action}'.`);
// ... send data to analytics platform
}
subscribe('cart:updated', logCartEvent);
4. ãã¡ã¯ããªãŒãã¿ãŒã³
æå³ïŒ ã€ã³ã¹ã¿ã³ã¹åã®ããžãã¯ãã¯ã©ã€ã¢ã³ãã«å ¬éããããšãªããªããžã§ã¯ããäœæããŸããæ°ããäœæããããªããžã§ã¯ãã¯ãå ±éã®ã€ã³ã¿ãŒãã§ãŒã¹ãä»ããŠåç §ãããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ ã·ã¹ãã ãç°ãªãã¿ã€ãã®ãªããžã§ã¯ããäœæããå¿ èŠãããããæ£ç¢ºãªã¿ã€ããå®è¡æã«æ±ºå®ãããå ŽåãäŸãã°ãUIã©ã€ãã©ãªã«ã¯ãæž¡ãããèšå®ãªããžã§ã¯ãã«åºã¥ããŠ`Button`ã`Input`ããŸãã¯`Modal`ãªããžã§ã¯ããè¿ããã¡ã¯ããªãŒé¢æ°`createComponent`ããããããããŸããã
äŸïŒãŠãŒã¶ãŒãã¡ã¯ããªãŒ
// userTypes.js
class Admin {
constructor(name) {
this.name = name;
this.role = 'Admin';
}
getPermissions() { return ['create', 'read', 'update', 'delete']; }
}
class Editor {
constructor(name) {
this.name = name;
this.role = 'Editor';
}
getPermissions() { return ['create', 'read', 'update']; }
}
class Viewer {
constructor(name) {
this.name = name;
this.role = 'Viewer';
}
getPermissions() { return ['read']; }
}
// userFactory.js
export function createUser(type, name) {
switch (type.toLowerCase()) {
case 'admin':
return new Admin(name);
case 'editor':
return new Editor(name);
case 'viewer':
return new Viewer(name);
default:
throw new Error('Invalid user type specified');
}
}
// --- Usage ---
// main.js
import { createUser } from './userFactory.js';
const adminUser = createUser('admin', 'Alice');
const viewerUser = createUser('viewer', 'Bob');
console.log(adminUser.getPermissions()); // ['create', 'read', 'update', 'delete']
console.log(viewerUser.getPermissions()); // ['read']
ã¢ãã³ã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã®ãã¹ããã©ã¯ãã£ã¹
å ç¢ãªã¢ãžã¥ãŒã«ã·ã¹ãã ãæã¡ããã¶ã€ã³ãã¿ãŒã³ãçè§£ããããšã¯éèŠã§ãããäžè²«ãããã¹ããã©ã¯ãã£ã¹ãé©çšããããšããã¢ããªã±ãŒã·ã§ã³ã®ã¢ãŒããã¯ãã£ãçã«åäžãããŸãããããã®ååã¯ãäžçäžã®ããããèŠæš¡ã®ããŒã ã«æ®éçã«é©çšå¯èœã§ãã
1. ã¿ã€ãå¥ã§ã¯ãªããæ©èœå¥ã«æ§é åãã
ããããééãã¯ããããžã§ã¯ãããã¡ã€ã«ã¿ã€ãå¥ã«æ§é åããããšã§ãããã¹ãŠã®ã³ã³ããŒãã³ãçšã®ãã©ã«ãããã¹ãŠã®ãµãŒãã¹çšã®ãã©ã«ãããã¹ãŠã®ã¹ã¿ã€ã«çšã®ãã©ã«ããªã©ã§ããããã¯å°ããªãããžã§ã¯ãã§ã¯è«ççã«èŠãããããããŸããããã¹ã±ãŒã©ããªãã£ã«ä¹ããã§ããã¢ããªã±ãŒã·ã§ã³ãæé·ããã«ã€ããŠãé¢é£ãã¡ã€ã«ãèŠã€ããã®ãé£ãããªããèªç¥è² è·ãå¢å€§ããŸãã
ã¯ããã«ã¹ã±ãŒã©ãã«ãªã¢ãããŒãã¯ãæ©èœå¥ãŸãã¯ãã¡ã€ã³å¥ã«æ§é åããããšã§ããç¹å®ã®æ©èœã«é¢é£ãããã¹ãŠã®ãã¡ã€ã«ãäžç·ã«ã°ã«ãŒãåããŸãã
éæšå¥šïŒã¿ã€ã奿§é ïŒïŒ
/src
/components
- UserProfile.js
- ProductCard.js
- OrderSummary.js
/services
- userService.js
- productService.js
- orderService.js
/styles
- user.css
- product.css
æšå¥šïŒæ©èœå¥æ§é ïŒïŒ
/src
/features
/user-profile
- UserProfile.js
- userService.js
- UserProfile.css
- index.js (exports UserProfile component)
/product-listing
- ProductCard.js
- productService.js
- ProductCard.css
- index.js
/order
- OrderSummary.js
- orderService.js
- index.js
ãã®ã¢ãããŒãã¯ãã³ãã±ãŒã·ã§ã³ããšãã°ãã°åŒã°ããæ©èœãããèªå·±å®çµåã«ããçè§£ããããããããã«ã¯åé€ãç§»è¡ã容æã«ããŸãã
2. ãã¬ã«ãã¡ã€ã«ãã¿ãŒã³ïŒãšãã®å±éºæ§ïŒ
æ©èœããŒã¹ã®æ§é äŸã«ãã`index.js`ãã¡ã€ã«ã¯ããã¬ã«ãã¡ã€ã«ããšåŒã°ããŸãããã®å¯äžã®ç®çã¯ããã£ã¬ã¯ããªããã¢ãžã¥ãŒã«ãåãšã¯ã¹ããŒãããåäžã®äŸ¿å©ãªãšã³ããªãŒãã€ã³ããäœæããããšã§ãã
äŸïŒ`/user-profile/index.js`ïŒïŒ
export { default as UserProfile } from './UserProfile.js';
export * as userService from './userService.js';
ããã«ãããä»ã®å Žæã§ã®ã€ã³ããŒããããã¯ãªãŒã³ã«ãªããŸãïŒ `import { UserProfile } from '../features/user-profile';`
èŠåïŒ ãã¬ã«ãã¡ã€ã«ã¯äŸ¿å©ã§ãããåé¡ãåŒãèµ·ããå¯èœæ§ããããŸããæ³šææ·±ã管çããªããšåŸªç°äŸåãåŒãèµ·ããå¯èœæ§ãããããŸãããã£ã¬ã¯ããªã®ããäžéšããå¿ èŠãªãå Žåã«ãã£ã¬ã¯ããªå šäœãã€ã³ããŒãããŠããŸãããšã§ãäžéšã®ãã³ãã©ã§ã¯ããªãŒã·ã§ã€ãã³ã°ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸããæ©èœã®ãããªãã¯APIããšã¯ã¹ããŒãããããã«ãæ éã«äœ¿çšããŠãã ããã
3. ã¢ãžã¥ãŒã«ãéäžãããïŒåäžè²¬ä»»ã®ååïŒ
åäžè²¬ä»»ã®ååïŒSRPïŒã¯ãã¢ãžã¥ãŒã«ãã¯ã©ã¹ã倿Žãããçç±ã¯1ã€ã ãã§ããã¹ãã ãšè¿°ã¹ãŠããŸãããããã¢ãžã¥ãŒã«ã«é©çšãããšãã¢ãžã¥ãŒã«ã¯1ã€ã®ããšãè¡ãããããããŸãè¡ãã¹ãã ãšããããšã§ããç¡é¢ä¿ãªé¢æ°ã®ãŽãæšãŠå Žãšãªããããªã¢ããªã·ãã¯ãª`utils.js`ã`helpers.js`ãã¡ã€ã«ãäœæããã®ã¯é¿ããŠãã ããã代ããã«ãããå ·äœçãªã¢ãžã¥ãŒã«ãäœæããŸãã
以äžã®ä»£ããã«ïŒ
// utils.js
export function formatDate(...) { ... }
export function validateEmail(...) { ... }
export function debounce(...) { ... }
export function getCurrencySymbol(...) { ... }
ãã¡ããæšå¥šïŒ
// date.utils.js
export function formatDate(...) { ... }
// validation.utils.js
export function validateEmail(...) { ... }
// performance.utils.js
export function debounce(...) { ... }
// currency.utils.js
export function getCurrencySymbol(...) { ... }
4. æ·±ããã¹ãã«ã¯çµ¶å¯Ÿã€ã³ããŒãã䜿çšãã
ãããžã§ã¯ããæé·ããã«ã€ããŠãçžå¯Ÿã€ã³ããŒããã¹ã¯`import { ... } from '../../../../features/user-profile';`ã®ãããªè€éãªæ··ä¹±ç¶æ ã«ãªãå¯èœæ§ããããŸããããã¯èªã¿ã«ããããªãã¡ã¯ã¿ãªã³ã°ã«å¯ŸããŠè匱ã§ãã
ã»ãšãã©ã®ã¢ãã³ãªãã«ãããŒã«ïŒViteãjsconfig.json/tsconfig.jsonã䜿çšããWebpackãªã©ïŒã§ã¯ããããžã§ã¯ãã«ãŒãããã®çµ¶å¯Ÿã€ã³ããŒãã®ããã®ãã¹ãšã€ãªã¢ã¹ãèšå®ã§ããŸããããã«ãããã€ã³ããŒãæãåçã«ã¯ãªãŒã³ã«ãªããŸãã
`jsconfig.json`ã䜿çšããäŸïŒ
// jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
ããã§ã`src`ãã£ã¬ã¯ããªå ã®ã©ãããã§ããã€ã³ããŒãã`import { UserProfile } from 'features/user-profile';`ã®ããã«ç°¡ç¥åã§ããŸãã
5. ã¢ãžã¥ãŒã«ã®ããã®æç¢ºãªãããªãã¯APIãå®çŸ©ãã
åæ©èœãã£ã¬ã¯ããªããèªå·±å®çµããå°ããªããã±ãŒãžãšèããŠãã ãããããã¯ãã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåã«å ¬éããæç¢ºãªãããªãã¯APIãæã€ã¹ãã§ãããéåžžã¯ã¡ã€ã³ã®`index.js`ãã¬ã«ãã¡ã€ã«ãä»ããŠå ¬éãããŸããå éšã®å®è£ 詳现ã¯ãšã¯ã¹ããŒããã¹ãã§ã¯ãããŸãããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåãå ¬éãããå®å®ããã€ã³ã¿ãŒãã§ãŒã¹ã«ã®ã¿äŸåããŠããããšãããããããæ©èœå ã®ãªãã¡ã¯ã¿ãªã³ã°ãããå®å šã«ãªããŸãã
ã¢ãã³ã¢ãŒããã¯ãã£ã®ããã®ããŒã«
å ç¢ãªã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã¯ã匷åãªããŒã«ã®ãšã³ã·ã¹ãã ã«ãã£ãŠãµããŒããããŠããŸãïŒ
- ãã³ãã©ïŒVite, Webpack, RollupïŒïŒ ãããã®ããŒã«ã¯ã¢ãžã¥ãŒã«ãåŠçããäŸåé¢ä¿ã解決ããæ¬çªçšã«æé©åããããã¡ã€ã«ã«ãã³ãã«ããŸããããªãŒã·ã§ã€ãã³ã°ãã³ãŒãåå²ããã¹ãšã€ãªã¢ã¹ãªã©ã®æ©èœãæå¹ã«ããŸãã
- ãªã³ã¿ãŒïŒESLintïŒïŒ ãªã³ã¿ãŒã¯ã³ãŒãã®å質ãšäžè²«æ§ã匷å¶ããŸãã`eslint-plugin-import`ã®ãããªãã©ã°ã€ã³ã¯ã埪ç°äŸåãä¹±éãªã€ã³ããŒããã¹ãªã©ãã¢ãžã¥ãŒã«é¢é£ã®äžè¬çãªåé¡ã鲿¢ã§ããŸãã
- TypeScriptïŒ å³å¯ã«ã¯ã¢ãžã¥ãŒã«ããŒã«ã§ã¯ãããŸããããTypeScriptã¯åŒ·åãªåä»ããæäŸããããšã§ã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã匷åããŸããã¢ãžã¥ãŒã«ã®ãããªãã¯APIã«æç€ºçãªã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸ©ã§ããäŸåé¢ä¿ãããæç¢ºã«ããã©ã³ã¿ã€ã ã§ã¯ãªãã³ã³ãã€ã«æã«ãšã©ãŒããã£ããã§ããŸãã
çµè«
JavaScriptã®ã¢ãžã¥ãŒã«ã¢ãŒããã¯ãã£ã¯ãåã«ãã¡ã€ã«ãæŽçããæ¹æ³ä»¥äžã®ãã®ã§ããããœãããŠã§ã¢ãæ§ç¯ããããã®å²åŠã§ããããã¯ãççµåã§ã¹ã±ãŒã©ãã«ã§ããã倿§ãªã°ããŒãã«ããŒã ãçè§£ãè²¢ç®ããããã·ã¹ãã ãæ§ç¯ããããšã§ããã°ããŒãã«ã¹ã³ãŒãã®æ··æ²ããESã¢ãžã¥ãŒã«ã®æ§é åãããäžçãžç§»è¡ããå®çžŸã®ãããã¶ã€ã³ãã¿ãŒã³ãšãã¹ããã©ã¯ãã£ã¹ãé©çšããããšã§ãããªãèªèº«ãšããªãã®ããŒã ã¯ãæ©èœçã§ããã ãã§ãªããå°æ¥ã«ããã£ãŠå埩åãããä¿å®å¯èœãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããåãåŸãããšãã§ããŸãã
ããã§è°è«ãããååâæ©èœã«ããæ§é åãã¢ãžã¥ãŒã«ã®çŠç¹ãçµãããšãæç¢ºãªAPIã®å®çŸ©ããã¡ãµãŒãããªãã¶ãŒããŒã®ãããªãã¿ãŒã³ã®æŽ»çšâã¯ããããã§ãã·ã§ãã«ãªãœãããŠã§ã¢éçºã®æ§æèŠçŽ ã§ããããããåãå ¥ããã°ãäžçã¯ã©ã¹ã®JavaScriptã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããæè¡ãç¿åŸããéãé 調ã«é²ãããšãã§ããã§ãããã